import React, { useState } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { Play, Pause, SkipBack, SkipForward, Volume2 } from 'lucide-react-native';
import { colors } from '@/constants/colors';
import { Platform } from 'react-native';

interface AudioPlayerProps {
  title: string;
  audioUrl: string;
  onPlaybackComplete?: () => void;
}

export const AudioPlayer: React.FC<AudioPlayerProps> = ({
  title,
  audioUrl,
  onPlaybackComplete,
}) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  
  // In a real app, we would use expo-av to play audio
  // For this demo, we'll simulate playback
  
  const togglePlayback = () => {
    setIsPlaying(!isPlaying);
    
    // Simulate playback progress
    if (!isPlaying) {
      const interval = setInterval(() => {
        setProgress(prev => {
          const newProgress = prev + 0.01;
          if (newProgress >= 1) {
            clearInterval(interval);
            setIsPlaying(false);
            if (onPlaybackComplete) {
              onPlaybackComplete();
            }
            return 1;
          }
          return newProgress;
        });
      }, 100);
    }
  };
  
  const skipBackward = () => {
    setProgress(Math.max(0, progress - 0.1));
  };
  
  const skipForward = () => {
    setProgress(Math.min(1, progress + 0.1));
  };
  
  // Format time as mm:ss
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };
  
  // Calculate current time based on progress and duration
  const currentTime = progress * duration;
  
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title} numberOfLines={1}>{title}</Text>
        <Volume2 size={18} color={colors.text.secondary} />
      </View>
      
      <View style={styles.progressContainer}>
        <View style={styles.progressBar}>
          <View 
            style={[
              styles.progressFill, 
              { width: `${progress * 100}%` }
            ]} 
          />
        </View>
        <View style={styles.timeContainer}>
          <Text style={styles.timeText}>{formatTime(currentTime)}</Text>
          <Text style={styles.timeText}>{formatTime(duration || 60)}</Text>
        </View>
      </View>
      
      <View style={styles.controls}>
        <Pressable onPress={skipBackward} hitSlop={10}>
          <SkipBack size={24} color={colors.text.primary} />
        </Pressable>
        
        <Pressable onPress={togglePlayback} style={styles.playButton}>
          {isPlaying ? (
            <Pause size={24} color={colors.text.inverse} />
          ) : (
            <Play size={24} color={colors.text.inverse} />
          )}
        </Pressable>
        
        <Pressable onPress={skipForward} hitSlop={10}>
          <SkipForward size={24} color={colors.text.primary} />
        </Pressable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.card,
    borderRadius: 16,
    padding: 16,
    marginVertical: 8,
    ...Platform.select({
      ios: {
        shadowColor: colors.shadow,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
      },
      android: {
        elevation: 2,
      },
      web: {
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
      },
    }),
  },
  titleContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text.primary,
    flex: 1,
    marginRight: 8,
  },
  progressContainer: {
    marginBottom: 16,
  },
  progressBar: {
    height: 4,
    backgroundColor: colors.border,
    borderRadius: 2,
    overflow: 'hidden',
    marginBottom: 8,
  },
  progressFill: {
    height: '100%',
    backgroundColor: colors.primary,
    borderRadius: 2,
  },
  timeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  timeText: {
    fontSize: 12,
    color: colors.text.tertiary,
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  playButton: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
});